<template>
  <!-- 1. v-if="visible" 控制组件是否渲染；2. 动态绑定 .visible 类控制显示样式 -->
  <div 
    v-if="visible" 
    class="notify" 
    :class="[`notify--${type}`, { visible: visible }]"  <!-- 核心：根据 visible 加显示类 -->
    :style="{
      backgroundColor: customColor || '',
      top: position === 'top' ? '0' : 'auto',
      bottom: position === 'bottom' ? '0' : 'auto'
    }"
  >
    <div class="notify__content">{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'Notify',
  props: {
    visible: Boolean, 
    type: { type: String, default: 'primary' },
    message: { type: String, default: '' },
    customColor: String,
    duration: { type: Number, default: 3000 },
    position: { type: String, default: 'top' }
  },
  data() {
    return { timer: null };
  },
  watch: {
    visible(val) {
      if (val) {
        this.startTimer(); 
      } else {
        this.clearTimer();
      }
    }
  },
  methods: {
    startTimer() {
      this.clearTimer();
      this.timer = setTimeout(() => {
        this.$emit('update:visible', false); // 自动关闭时触发父级更新 visible
      }, this.duration);
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    }
  },
  beforeDestroy() {
    this.clearTimer();
  }
};
</script>

<style scoped lang="scss">
.notify {
  position: fixed;
  left: 0;
  right: 0;
  padding: 12px;
  text-align: center;
  color: #fff;
  z-index: 10000; /* 确保层级最高，不被其他元素遮挡 */
  transition: opacity 0.3s ease, transform 0.3s ease; /* 动画更流畅 */
  opacity: 0; /* 初始透明 */
  transform: translateY(-100%); /* 初始在顶部外（top 定位时） */
}

/* 不同类型背景色 */
.notify--primary { background-color: #1989fa; }
.notify--success { background-color: #07c160; }
.notify--danger { background-color: #ff4d4f; }
.notify--warning { background-color: #faad14; }

/* 显示状态：透明变不透明，偏移归位 */
.notify.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 底部定位时的初始偏移（适配 position: bottom） */
.notify[style*="bottom: 0"] {
  transform: translateY(100%); /* 底部初始在视口外 */
}
.notify[style*="bottom: 0"].visible {
  transform: translateY(0); /* 显示时归位 */
}
</style>